import React from 'react'
import { Button, View, Image } from 'react-native'
import { createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import LoginScreen from '../pages/Login';
import HomePageScreen from '../pages/HomePage';
import RegisterScreen from '../pages/register';
import DetailPage from '../pages/DetailPage';
import { connect } from 'react-redux'
import { createReactNavigationReduxMiddleware, createReduxContainer } from 'react-navigation-redux-helpers'
import BasicInformationPage from "../common/Personal/BasicInformationPage";
import ScheduleListPage from "../common/Personal/ScheduleListPage";

import Ionicons from "react-native-vector-icons/Ionicons";
import MaterialIcons from "react-native-vector-icons/MaterialIcons";


export const rootCom = 'Main'


const MainNavigator = createStackNavigator({
    Login: {
        screen: LoginScreen,
        navigationOptions: props => {
            const { navigation } = props
            return {
                title: '登录',
                headerStyle: {
                    backgroundColor: '#2168d2'
                },
                headerTitleStyle: {
                    color: "white",
                    flex: 1,
                    textAlign: 'center'
                },
                headerLeft: (
                    <Ionicons
                        name='ios-home'
                        size={26}
                        style={{ color: 'white' }}
                        onPress={() => {
                            navigation.getParam('openDrawer').openDrawer()
                        }

                        }
                    />
                ),
                headerRight: <View />,
                headerLeftContainerStyle: {
                    paddingLeft: 20
                }
            }
        },
    },
    Register: {
        screen: RegisterScreen,
        navigationOptions: {
            title: "注册",
            headerStyle: {
                backgroundColor: '#2168d2'
            },
            headerTitleStyle: {
                color: "white",
                flex: 1, textAlign: 'center'
            },
            headerRight: <View />,
            headerBackImage: <Image
                source={require('../common/util/img/back.png')}
                style={{ width: 20, height: 20 }}
            ></Image>
        }
    },
});
const HomeNavigator = createStackNavigator({
    HomePage: {
        screen: HomePageScreen,
        navigationOptions: {
            title: '知了星',
            headerStyle: {
                backgroundColor: '#2168d2'
            },
            headerTitleStyle: {
                color: "white",
                flex: 1,
                textAlign: 'center'

            }
        },
    },
    DetailPage: {
        screen: DetailPage,
        navigationOptions: {
            title: '详情页',
            headerStyle: {
                backgroundColor: '#2168d2'
            },
            headerTitleStyle: {
                color: "white",
                flex: 1,
                textAlign: 'center'
            }
        },
    }, BasicInformationPage: {
        screen: BasicInformationPage,
        navigationOptions: {
            title: '编辑信息',
            headerStyle: {
                backgroundColor: '#2168d2'
            },
            headerTitleStyle: {
                color: "white",
                flex: 1,
                textAlign: 'center'
            }
        },
    }, ScheduleListPage: {
        screen: ScheduleListPage,
        navigationOptions: {
            title: '日程列表',
            headerStyle: {
                backgroundColor: '#2168d2'
            },
            headerTitleStyle: {
                color: "white",
                flex: 1,
                textAlign: 'center'
            }
        },
    },
});
export const RootNavigator = createSwitchNavigator(
    {
        Main: MainNavigator,
        Home: HomeNavigator,
    },
    {
        initialRouteName: 'Main',
    },
);

export const middleware = createReactNavigationReduxMiddleware(
    state => state.nav,
    'root'
)
const AppWithNavigationState = createReduxContainer(RootNavigator, 'root');

const mapStateToProps = state => ({
    state: state.nav
})

export default connect(mapStateToProps)(AppWithNavigationState);
